<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <title>时间线查询</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/public.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>读者借书情况</legend>
</fieldset>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layuimini-main">
            <div class="demoTable">
                <div class="layui-form-item layui-form ">
                    图书名称
                    <div class="layui-inline">
                        <input class="layui-input" name="bookName" id="bookName" autocomplete="off">
                    </div>
                    归还类型
                    <div class="layui-inline">
                        <select class="layui-input" name="backType" id="backType">
                            <option value=""></option>
                            <%--                            <option value="">在借中</option>--%>
                            <option value="0">正常还书</option>
                            <option value="1">延迟还书</option>
                            <option value="2">破损还书</option>
                            <option value="3">丢失</option>
                        </select>
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
            </div>
        </div>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">借书</button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>
</div>
<script src="${pageContext.request.contextPath}/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        table.render({
            elem: '#currentTableId',
            url: '${pageContext.request.contextPath}/queryLendBookListAll',//查询借阅图书记录
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {
                    templet: '<div><a href="javascript:void(0)" style="color:#00b7ee" lay-event="bookInfoEvent">{{d.bookName}}</a></div>',
                    width: 150,
                    title: '图书名称'
                },
                {
                    templet: '<div>{{d.readerNumber}}</div>',
                    width: 150,
                    title: '借书卡'
                },
                {
                    templet: '<div><a href="javascript:void(0)" style="color:#00b7ee" lay-event="readerInfoEvent">{{d.realName}}</a></div>',
                    width: 100,
                    title: '借阅人'
                },
                {
                    templet: "<div>{{layui.util.toDateString(d.lendDate,'yyyy-MM-dd HH:mm:ss')}}</div>",
                    width: 200,
                    title: '借阅时间',
                },
                {
                    width: 200,
                    title: '还书时间',
                    templet: function (res) {
                        // console.log(res)
                        if (res.backType == '0' || res.backType == '1' || res.backType == '2' || res.backType == '3') {
                            // 说明已经还书了
                            var backD = toDate(res.backDate)
                            // console.log(backD)
                            return '<div>' + backD + '</div>';
                        } else {
                            return "<div>暂无信息</div>";
                        }
                    }
                },
                {
                    title: "还书类型",
                    minWidth: 150,
                    templet: function (res) {
                        if (res.backType == '0') {
                            return '<span class="layui-badge layui-bg-green">正常还书</span>'
                        } else if (res.backType == '1') {
                            return '<span class="layui-badge layui-bg-gray">延迟还书</span>'
                        } else if (res.backType == '2') {
                            return '<span class="layui-badge layui-bg-yellow">破损还书</span>'
                        } else if (res.backType == '3') {
                            return '<span class="layui-badge layui-bg-red">丢失图书</span>'
                        } else {
                            return '<span class="layui-badge layui-bg-orange">在借中</span>'
                        }
                    }
                },
            ]],
            limits: [5, 10, 15, 20, 25, 50, 100],
            limit: 5,  <!--默认显示5条-->
            page: true,
            skin: 'line',
            id: 'testReload'
        });

        function toDate(date) {
            return layui.util.toDateString(date, 'yyyy-MM-dd HH:mm:ss')
        }


        var $ = layui.$, active = {
            reload: function () {
                var bookName = $('#bookName').val();
                var backType = $('#backType').val();
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        "bookName": bookName,
                        "backType": backType,
                    }
                }, 'data');
            }
        };


        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        /**
         * tool操作栏监听事件
         */
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'bookInfoEvent') {//书的借阅线
                //获取书的id
                var bid = data.bookId;
                queryLookBookList("book", bid);
            } else {//读者借阅线
                //获取读者的id
                var rid = data.readerId;
                queryLookBookList("user", rid);
            }
        });

        /**
         * 借阅线打开内容
         */
        function queryLookBookList(flag, id) {
            var index = layer.open({
                title: '借阅时间线',
                type: 2,
                shade: 0.2,
                maxmin: true,
                shadeClose: true,
                area: ['60%', '60%'],
                content: '${pageContext.request.contextPath}/queryLookBookList?id=' + id + "&flag=" + flag,
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        }

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '借书管理',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '${pageContext.request.contextPath}/addLendList',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        });
    });
</script>
</body>
</html>
